<template>
	<div class="basicSetup">
		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					直播回放
				</div>
				<div class="basicSetupItemsTitle_cont">
					启动回放后，直播结束后将自动生成回放视频并允许观众查看
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[0].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>
		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					超低延迟
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后，观众端延迟在1s左右，但流量消耗将是标准直播的2倍
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[1].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>
		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					热力值
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后用户可在直播间看到热力值
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[2].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>
		<div class="basicSetupItems">
			<div class="basicSetupItemsTitle">
				<div class="basicSetupItemsTitle_text">
					微信默认授权
				</div>
				<div class="basicSetupItemsTitle_cont">
					开启后，用户需微信授权后方可观看直播
				</div>
			</div>
			<div class="useLable">
				<u-switch v-model="from.setting[3].status" @change="changeSwitch" activeColor="#295EFF"></u-switch>
			</div>
		</div>

		<div class="liveInformationBtn" @click='saveLiveEvent'>
			<div class="liveInformationBtnCont">
				保存
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			setInfo: [Object, String],
			liveId: [Number, String]
		},
		data() {
			return {
				switchValue: '',
				from: {
					liveId: '',
					setting: [{
							content: "",
							status: false,
							type: "playback"
						},
						{
							content: "",
							status: false,
							type: "lowLatency"
						},
						{
							content: "",
							status: false,
							type: "heat"
						},
						{
							content: "",
							status: false,
							type: "wxLogin"
						}
					]
				},

			}
		},
		watch: {
			setInfo(newVal, oldVal) {
				this.changeData(newVal)
			}
		},
		mounted() {
			this.from.liveId = this.liveId
			this.changeData(this.setInfo)
		},
		methods: {
			changeData(d) {
				const v = JSON.parse(JSON.stringify(d))
				if (!v.setting) return
				v.setting.forEach((ite) => {
					ite.status = ite.status == 1 ? true : false
				})
				for (var i in this.from.setting) {
					for (var k in v.setting) {
						if (this.from.setting[i].type == v.setting[k].type) {
							console.log('inactiveValueinactiveValueinactiveValue', v.setting[k])
							this.from.setting[i].status = v.setting[k].status
							this.$set(this.from.setting[i], 'status', v.setting[k].status)
						}
					}
				}

			},
			saveBasic() {

			},
			// 整理数据
			async saveLiveEvent() {
				const params = {
					liveId: this.from.liveId,
					setting: JSON.parse(JSON.stringify(this.from.setting))
				}
				params.setting.forEach((ite) => {
					ite.status = ite.status ? 1 : 2
				})
				const {
					data
				} = await this.$request(this.$Api.liveUpdateBaseSetting, params, "post")
				if (data.code != 200) return
				uni.showToast({
					title: '修改成功',
					icon: 'none',
					duration: 1500
				})
			},
			changeSwitch() {
				this.saveBasic()
				console.log(this.from)
			}
		}
	}
</script>

<style lang="scss">
	.basicSetup {
		width: 686rpx;
		min-height: 96rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-bottom: 32rpx;

		.basicSetupItems {
			padding: 0 32rpx;
			padding-top: 36rpx;
			position: relative;
			height: 88rpx;
			margin-bottom: 36rpx;

			.basicSetupItemsTitle {
				.basicSetupItemsTitle_text {
					font-size: 28rpx;
					color: #464C5B;
				}

				.basicSetupItemsTitle_cont {
					font-size: 20rpx;
					color: #BFBFBF;
					margin-top: 12rpx;
				}
			}

			.useLable {
				position: absolute;
				right: 32rpx;
				top: 32rpx;
				zoom: .85;

				switch {}
			}

		}

		.liveInformationBtn {
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;

			.liveInformationBtnCont {
				width: 640rpx;
				height: 80rpx;
				background: #295FFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 32rpx;

			}
		}
	}
</style>